<script setup>
import { useTopicDataQuery } from '@/composables/useTopicDataQuery'
import { useRoute, useRouter } from 'vue-router'
import { fetchEditTopic, fetchDeleteTopic } from '@/axios/api/topic'
import LfFormItem from '@/components/commonUI/LfFormItem.vue'
import LfSwitch from '@/components/commonUI/LfSwitch.vue'
import { useTopicManageStore } from '@/stores/TopicManageStore'
import SettingTitle from './components/SettingTitle.vue'
import LfButton from '@/components/commonUI/LfButton.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserTopicListQuery } from '@/composables/useUserInfoQuery'
const topicManageStore = useTopicManageStore()
const route = useRoute()
const router = useRouter()
const { data, refetch } = useTopicDataQuery(route.params.topicId)
const { refetch: refetchUserTopicList } = useUserTopicListQuery()

const isPrivate = ref(data.value?.result?.isPrivacy === 1)
const isVerify = ref(data.value?.result?.rest === 1)

const handlePrivateSwitch = (value) => {
  fetchEditTopic({
    id: route.params.topicId,
    isPrivacy: value ? 1 : 0,
  }).then((res) => {
    if (res.code === 0) {
      refetch()
    }
  })
}

const handleVerifySwitch = (value) => {
  if (!value) {
    fetchEditTopic({
      id: route.params.topicId,
      rest: value ? 1 : 0,
    }).then((res) => {
      if (res.code === 0) {
        refetch()
      }
    })
  } else {
    isVerify.value = true
    topicManageStore.showTopicSetting()
    topicManageStore.setTopicSettingData({
      label: '申请问题',
      value: data.value.result.question,
      topicId: route.params.topicId,
    })
  }
}

const handleDeleteTopic = () => {
  ElMessageBox.confirm('解散主题后将不可恢复，确认解散吗？', '解散主题', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    fetchDeleteTopic({
      id: route.params.topicId,
    }).then((res) => {
      if (res.code === 0) {
        refetchUserTopicList()
        ElMessage({
          type: 'success',
          message: '解散成功',
        })
        router.push('/')
      }
    })
  })
}

const handleAvatarClick = () => {
  topicManageStore.showTopicSetting()
  topicManageStore.setTopicSettingData({
    label: '主题头像',
    value: data.value.result.coverImage,
    topicId: route.params.topicId,
  })
}

const handleBgClick = () => {
  topicManageStore.showTopicSetting()
  topicManageStore.setTopicSettingData({
    label: '主题背景',
    value: data.value.result.bgImage,
    topicId: route.params.topicId,
  })
}
</script>

<template>
  <div class="pb-[40px] relative">
    <SettingTitle title="编辑模板风格" />
    <div  class="flex flex-col gap-4 ">
      <!-- <LfFormItem
        isPrivate
        label="主题名称"
        :maxLength="12"
        placeholder="请输入主题名称"
        :value="data.result.topicName" /> -->
121
        <div class="p-2 hover:border-[--line-b] box-border relative" >
          <div class="cursor-pointer absolute top-0 right-0 border border-[--line-1] rounded-lg w-full h-full hover:border-[--line-b] hover:border-2">
            
          </div>
    <div class="flex items-center justify-between">
      <div class="flex flex-col gap-1 w-full">
        <div class="text-sm text-[--text-3] flex items-center gap-1">
          {{ label }}2121
          <!-- <span v-if="required" class="text-[--text-1]">*</span> -->
        </div>

        <!-- <input
          v-if="type === 'text'"
          :disabled="isPrivate"
          ref="inputRef"
          type="text"
          class="w-full disabled:bg-[--fill-0]"
          :value="value"
          :maxlength="maxLength"
          @focus="handleFocus"
          @blur="handleBlur"
          @input="handleChange"
          :placeholder="placeholder" />

        <textarea
          v-if="type === 'textarea'"
          :disabled="isPrivate"
          class="w-full disabled:bg-[--fill-0]"
          ref="inputRef"
          :value="value"
          :maxlength="maxLength"
          @focus="handleFocus"
          @blur="handleBlur"
          @input="handleChange"
          :placeholder="placeholder" /> -->

        <!-- <div v-if="!isPrivate && type !== 'select'" class="text-xs text-[--text-3] self-end">
          {{ value?.length }}/{{ maxLength }}
        </div> -->
      </div>

      <!-- <div v-if="isPrivate">
        <LfButton icon type="secondary-no-bg"><ArrowIcon direction="right" /></LfButton>
      </div> -->
    </div>
    <!-- border -->
    <!-- <div
      v-if="!isPrivate"
      class="absolute top-0 right-0 border border-[--line-1] rounded-lg w-full h-full"
      :class="isFocus ? 'border-[--line-b] border-2 box-border' : ''"></div>
    <div
      v-else
      class="cursor-pointer absolute top-0 right-0 border border-[--line-1] rounded-lg w-full h-full hover:border-[--line-b] hover:border-2"></div> -->
  </div>

    </div>
  </div>
</template>
